<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link type="text/css" rel="stylesheet" th:href="@{/css/all.css}"/>
    <link type="text/css" rel="stylesheet" th:href="@{/plugin/zTree_v3-master/css/metroStyle/metroStyle.css}"/>
    <link type="text/css" rel="stylesheet" th:href="@{/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css}"/>
    <link type="text/css" rel="stylesheet" th:href="@{/plugin/upLoad/css/amazeui.min.css}"/>
    <link type="text/css" rel="stylesheet" th:href="@{/plugin/upLoad/css/font-awesome.4.6.0.css}"/>
    <link type="text/css" rel="stylesheet" th:href="@{/plugin/upLoad/css/amazeui.cropper.css}"/>
    <link type="text/css" rel="stylesheet" th:href="@{/plugin/upLoad/css/custom_up_img.css}"/>


    <script language='JavaScript' th:src='@{/plugin/jQuery/jQuery-2.2.0.min.js}'></script>
    <script language='JavaScript' th:src="@{/ajax/layer/layer.min.js}"></script>
    <script language='javascript' th:src='@{/js/constant.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/jQuery/jquery.mousewheel.min.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/jquery-easyui-1.5.1/jquery.easyui.min.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/bootstrap/js/bootstrap.min.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/bootstrap-table/bootstrap-table.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/adminLTE/js/app.min.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/lobibox/dist/js/lobibox.js}'></script>
    <script language='JavaScript' th:src='@{/js/network.js}'></script>
    <script language='JavaScript' th:src='@{/js/common.js}'></script>
    <script language='JavaScript' th:src='@{/js/public.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/bootstrap-datetimepicker/js/moment-with-locales.min.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/iCheck/icheck.min.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/zTree_v3-master/js/jquery.ztree.core.min.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/zTree_v3-master/js/jquery.ztree.excheck.min.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js}'></script>
    <script language='JavaScript' th:src='@{/js/cropper.min.js}'></script>
    <script language='JavaScript' th:src='@{/plugin/AmazeUI/js/amazeui.js}'></script>

    <style type="text/css">
        .form-group{
            margin-top: 5px;
            margin-bottom: 5px;
        }
        #user-role-table td {
           border-left-width: 0px !important;
            border-right-width: 0px !important;
         }

        #user-role-table th {
            border-left-width: 0px !important;
            border-right-width: 0px !important;
        }
        .am-modal-dialog{
            position: relative;
            display: inline-block;
            vertical-align: top;
            margin-left: auto;
            margin-right: auto;
            margin-top: 10px;
            width: 270px;
            max-width: 100%;
            max-height: 100%;
            border-radius: 0;
            background: #f8f8f8;
        }
    </style>
</head>
<body class="body-contrainner fadeInUp">
<div class="box box-info">
    <div class="box-header with-border">
        <form id="form-search" class="form-inline has-info">
            <div class="form-group">
                <label class="control-label">创建人</label>
                <input type="text" id="name" name="create_user@@like" class="form-control" placeholder="请输入创建人名称">
            </div>
<!--            <div class="form-group">
                <label class="control-label">用户名称</label>
                <input type="text" id="userName" name="Log_User@@like" class="form-control" placeholder="请输入用户名称">
            </div>-->
        </form>
        <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
        </div>
    </div>
    <div class="box-body" style="padding-top: 0px;">
        <div id="tool-bar">
            <button id="btn-search" type="button" class="btn btn-info"><i class="fa fa-search margin-r-5"></i>查询</button>
            <button id="btn-add" type="button" class="btn btn-default"><i class="fa fa-plus margin-r-5"></i>上传</button>
<!--
            <button id="btn-edt" type="button" class="btn btn-default"><i class="fa fa-edit margin-r-5"></i>编辑</button>
-->
            <button id="btn-del" type="button" class="btn btn-default"><i class="fa fa-remove margin-r-5"></i>删除</button>
        </div>
        <table id="data-table" class="table table-bordered" data-striped="true" data-pagination="true" data-search="false"
               data-search-on-enter-key="true" data-show-columns="true" data-show-refresh="true"
               data-show-toggle="true" 	data-show-pagination-switch="true" data-id-field="id"
               data-unique-id="id" data-click-to-select="true" data-side-Pagination="server"
               data-cache="false" data-method="get" data-toolbar="#tool-bar" data-query-params="getParam">
            <thead>
            <tr id="tab">

            </tr>
            </thead>
        </table>
    </div>
</div>

<!--图片上传框-->
<div class="am-modal am-modal-no-btn up-frame-bj " tabindex="-1" id="doc-modal-1">
    <div class="am-modal-dialog up-frame-parent up-frame-radius">
        <div class="am-modal-hd up-frame-header">
            <label>修改头像</label>
            <a id="colseMode" href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
        </div>
        <div class="am-modal-bd  up-frame-body">
            <div class="am-g am-fl">
                <div class="am-form-group am-form-file">
                    <div class="am-fl">
                        <button type="button" class="am-btn am-btn-default am-btn-sm">
                            <i class="am-icon-cloud-upload"></i> 选择要上传的文件</button>
                    </div>
                    <input type="file" id="inputImage">
                </div>
            </div>
            <div class="am-g am-fl" >
                <div class="up-pre-before up-frame-radius">
                    <img alt="" src="" id="image" >
                </div>
                <div class="up-pre-after up-frame-radius">
                </div>
            </div>
            <div class="am-g am-fl">
                <div class="up-control-btns">
                    <span class="am-icon-rotate-left"  onclick="rotateimgleft()"></span>
                    <span class="am-icon-rotate-right" onclick="rotateimgright()"></span>
                    <span class="am-icon-check" id="up-btn-ok"></span>
                </div>
            </div>

        </div>
    </div>
</div>



<!--<div id="input-modal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title text-info">填写图片信息</h4>
            </div>
            <div class="modal-body">

                <form id="form-input" class="form-horizontal has-info form-validate">
                    <div class="form-group">
                        <label class="control-label col-md-2 required1">图片备注</label>
                        <div class="col-md-9">
                            <input type="text" class="form-control" name="mark" placeholder="请输入图片备注">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="btn-cancel" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="btn-save" type="button" class="btn btn-info">保存</button>
            </div>
        </div>
    </div>
</div>-->




<script language="JavaScript">
   ajax.postData(publicData.urls.system.getFields, {'tableName':'sys_user_imgs'}, function (data) {
       var html='<th data-field="state" data-checkBox="true">#</th>';
       html+='<th data-field="rowNum" data-align="left" data-halign="left" data-valign="middle" data-formatter="bootstrapFormatter.rowNumFormatter">序号</th>'

       for(var i = 0;i < data.length;++i){
           var codeAndInfo = data[i];
           if(codeAndInfo.column_name == "id"||codeAndInfo.column_name == "blob_img"){

           }else if(codeAndInfo.column_name == "base_img"){
               html+='<th data-field="'+codeAndInfo.column_name+'" data-align="left" data-halign="left"'
                   +'data-valign="middle" data-sortable="false" data-formatter="operateFormatter">'+codeAndInfo.column_comment+'</th>';
           }else{
               html+='<th data-field="'+codeAndInfo.column_name+'" data-align="left" data-halign="left"'
                   +'data-valign="middle" data-sortable="true">'+codeAndInfo.column_comment+'</th>';
           }
       }
       $("#tab").html(html);
       if ( data!=null||data!="") {
           $("#data-table").bootstrapTable("refresh");
           $("#data-table").bootstrapTable({url: publicData.urls.system.getPage});
       }else{
           $("#tab").html("不存在");
       }
   });


   var operateFormatter = function(value,row,index) {//赋予的参数

           return [
               '<img src="'+value+'" style="width:40px;height: 30px;margin: 0px;">', ]
               .join('');
   }

   //这个携带页面查询参数
    function getParam(params) {
        var total=commonTools.getBootstrapParams(params, $("#form-search"))
        total.params.tableName='sys_user_imgs';
        if(total.sort==undefined){
            total.sort='create_time';
            total.order='desc';
        }
        return total;
    }

    $("#btn-search").click(function () {
        $("#data-table").bootstrapTable("refresh");
    });

    $("#btn-del").click(function () {
        var datas = $("#data-table").bootstrapTable("getSelections");
        if (datas.length == 0) {
            messageBox.info("请选择要删除的数据");
            return;
        }
        var ids="";
        for(var i=0;i<datas.length;i++){
            ids+=datas[i].id
            if(i==datas.length-1){

            }else{
                ids+=",";
            }
        }
        messageBox.confirm("您确认要删除该数据吗？", function(){
            ajax.postData(publicData.urls.system.del, {"id": ids,"tableName":"sys_user_imgs"}, function () {
                messageBox.success("删除成功");
                $("#data-table").bootstrapTable("refresh");
            });
        }, undefined);
    });
 /*  $("#btn-edt").click(function () {
       var datas = $("#data-table").bootstrapTable("getSelections");
       if (datas.length == 0) {
           messageBox.info("请选择要修改的数据");
       }
       if(undefined==datas[0].mark||""==datas[0].mark){
           datas[0].mark="";
       }
      commonTools.setFormData(datas[0], $("#form-input"));
       $("#input-modal").modal("show");
   });*/


</script>
<script language='JavaScript'>
    $("#btn-add").click(function(){
        $("#doc-modal-1").modal({width:'600px'});
    }),

    $(function() {
        'use strict';
        // 初始化
        var $image = $('#image');
        $image.cropper({
            aspectRatio: '1',
            autoCropArea:0.8,
            preview: '.up-pre-after',

        });

        // 上传图片
        var $inputImage = $('#inputImage');
        //作为预览使用
        var URL = window.URL || window.webkitURL;
        var blobURL;
        if (URL) {
            $inputImage.change(function () {
                var files = this.files;
                var file;
                if (files && files.length) {
                    file = files[0];
                    //判断是不是图片格式
                    if (/^image\/\w+$/.test(file.type)) {
                        blobURL = URL.createObjectURL(file);
                        $image.one('built.cropper', function () {
                            // Revoke when load complete
                            URL.revokeObjectURL(blobURL);
                        }).cropper('reset').cropper('replace', blobURL);
                        $inputImage.val('');
                    } else {
                        messageBox.error("请选择图片类型文件");
                    }
                }
            });
        } else {
            $inputImage.prop('disabled', true).parent().addClass('disabled');
        }

        //绑定上传事件
        $('#up-btn-ok').on('click',function(){
            var img_src=$image.attr("src");
            if(img_src==""){
                messageBox.error("没有选择上传的图片");
                return false;
            }

            var canvas=$("#image").cropper('getCroppedCanvas');
            var data=canvas.toDataURL("image/jpeg",0.7); //转成base64
            var imgs = data.toString();
            ajax.postData(publicData.urls.personal.savePhotos,{"image":imgs}, function (data) {
                if(data=="ok"){
                    $("#colseMode").click()
                    messageBox.success("图片上传成功");
                    $("#data-table").bootstrapTable("refresh");
                }else{
                    messageBox.error("图片上传失败");
                    $("#data-table").bootstrapTable("refresh");
                }
            });

        });

    });

    function rotateimgright() {
        $("#image").cropper('rotate', 90);
    }


    function rotateimgleft() {
        $("#image").cropper('rotate', -90);
    }
</script>
</body>
</html>